<route lang="yaml">
meta:
  title: 主页
  icon: ant-design:home-twotone
</route>

<script setup lang="ts">
const versionType = ref('basic')
watch(versionType, (val) => {
  if (val === 'pro') {
    location.href = `${location.origin}${location.pathname}`.replace('basic-example', 'pro-example')
  }
})
</script>

<template>
  <div>
    <FaPageHeader>
      <template #title>
        <div class="flex items-center gap-4">
          欢迎使用 喵喵AI推文系统
        </div>
      </template>
      <template #description>
        <div class="text-sm/6">
          <div>
            这是一款<b class="text-emphasis">一站傻瓜式</b>的小说推文生成系统，能够快速处理推广小说并且输出到剪映草稿，真正做到10分钟快速出视频。
          </div>
          <div>
            商务合作联系：钟喵喵（QQ：524547428）
          </div>
        </div>
      </template>
    </FaPageHeader>
    <FaPageMain>
      <img src="@/assets/images/生成特定比例的美少女.jpg">
    </FaPageMain>
<!--    <div class="w-full flex flex-col gap-4 px-4 xl-flex-row">-->
<!--      <FaPageMain class="m-0 flex-1" title-class="flex flex-wrap items-center justify-between gap-4">-->
<!--        <template #title>-->
<!--          <div class="title-info">-->
<!--            <img src="https://cn.vuejs.org/logo.svg">-->
<!--            <div>-->
<!--              <h1 class="c-[#41b883]">-->
<!--                Fantastic-startkit-->
<!--              </h1>-->
<!--              <h2>一款简单好用的 Vue3 项目启动套件</h2>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="ms-auto">-->
<!--            <FaButton @click="open('https://hooray.github.io/fantastic-startkit')">-->
<!--              访问官网-->
<!--            </FaButton>-->
<!--          </div>-->
<!--        </template>-->
<!--        <ul class="m-0 list-disc px-8 text-sm leading-6 space-y-1">-->
<!--          <li v-for="item in fantasticStartkitInfo.feature" :key="item">-->
<!--            {{ item }}-->
<!--          </li>-->
<!--        </ul>-->
<!--      </FaPageMain>-->
<!--      <FaPageMain class="m-0 flex-1" title-class="flex flex-wrap items-center justify-between gap-4">-->
<!--        <template #title>-->
<!--          <div class="title-info">-->
<!--            <img src="https://fantastic-admin.hurui.me/logo.svg">-->
<!--            <div>-->
<!--              <h1 class="c-[#41b883]">-->
<!--                Fantastic-admin-->
<!--              </h1>-->
<!--              <h2>一款开箱即用的 Vue 中后台管理系统框架</h2>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="ms-auto">-->
<!--            <FaButton @click="open('https://fantastic-admin.hurui.me')">-->
<!--              访问官网-->
<!--            </FaButton>-->
<!--          </div>-->
<!--        </template>-->
<!--        <ElCarousel trigger="click" indicator-position="none" :interval="5000" height="250px">-->
<!--          <ElCarouselItem v-for="(item, index) in fantasticAdminInfo.data" :key="item">-->
<!--            <ElImage :src="item" fit="cover" style="width: 100%; height: 250px; margin: auto; cursor: pointer;" @click="fantasticAdminInfo.imageVisible = true; fantasticAdminInfo.index = index" />-->
<!--          </ElCarouselItem>-->
<!--        </ElCarousel>-->
<!--        <ElImageViewer v-if="fantasticAdminInfo.imageVisible" :url-list="fantasticAdminInfo.data" :initial-index="fantasticAdminInfo.index" @close="fantasticAdminInfo.imageVisible = false" />-->
<!--      </FaPageMain>-->
<!--      <FaPageMain class="m-0 flex-1" title-class="flex flex-wrap items-center justify-between gap-4">-->
<!--        <template #title>-->
<!--          <div class="title-info">-->
<!--            <img src="https://one-step-admin.hurui.me/logo.png">-->
<!--            <div>-->
<!--              <h1 class="c-[#67c23a]">-->
<!--                One-step-admin-->
<!--              </h1>-->
<!--              <h2>一款干啥都快人一步的 Vue 中后台系统框架</h2>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="ms-auto">-->
<!--            <FaButton @click="open('https://one-step-admin.hurui.me')">-->
<!--              访问官网-->
<!--            </FaButton>-->
<!--          </div>-->
<!--        </template>-->
<!--        <ElCarousel trigger="click" indicator-position="none" :interval="5000" height="250px">-->
<!--          <ElCarouselItem v-for="(item, index) in oneStepAdminInfo.data" :key="item">-->
<!--            <ElImage :src="item" fit="cover" style="width: 100%; height: 250px; margin: auto; cursor: pointer;" @click="oneStepAdminInfo.imageVisible = true; oneStepAdminInfo.index = index" />-->
<!--          </ElCarouselItem>-->
<!--        </ElCarousel>-->
<!--        <ElImageViewer v-if="oneStepAdminInfo.imageVisible" :url-list="oneStepAdminInfo.data" :initial-index="oneStepAdminInfo.index" @close="oneStepAdminInfo.imageVisible = false" />-->
<!--      </FaPageMain>-->
<!--    </div>-->
  </div>
</template>

<style scoped>
.text-emphasis {
  text-emphasis-style: "❤";
}

.title-info {
  --uno: flex items-center gap-4;

  img {
    --uno: block w-12 h-12;
  }

  h1 {
    --uno: m-0 text-2xl;
  }

  h2 {
    --uno: m-0 text-base text-secondary-foreground/50 font-normal;
  }
}
</style>
